<template>
	<view class="main">
		<view class="boxmax" v-if="History.length > 0">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="scroll-view-item">
					<Dramacase type="history" :DramacaseList="History" @dramacasedramacase="ReadHistoy"></Dramacase>
				</view>
			</scroll-view>
		</view>
		<view class="nodata" v-if="s">
			<view class="kong" v-if="History.length == 0">
				<image src="@/static/nodata.svg" mode=""></image>
				<view class="nowenzi">
					这里暂时还是空空如也呢
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserWatchRecordList,
		getUserWatchRecordDelete
	} from "@/request/api.js"
	import Dramacase from "@/components/Dramacase.vue"
	export default {
		components:{
			Dramacase
		},
		data() {
			return {
				History: [],
				page: 1,
				page_size: 10,
				totalPage: '',
				s: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				isClickId:uni.getStorageSync("clickid") || '',
			};
		},
		onShow() {
			this.goTop()
			setTimeout(() => {
				this.ReadHistoy()
			}, 100)
		},
		onHide() {
			this.page = 1
		},
		onUnload() {
			this.page = 1
		},
		methods: {
			// 去详情页
			goDetail(v) {
				uni.navigateTo({
					// url: `/pages/Detail/Detail?id=${v.book_id}&search_keyword_id=0&chapter_id=${v.chapter_id}`
				url: `/pages/novel_plugin/index?id=${v.book_id}&search_keyword_id=0&chapter_id=${v.chapter_id}`
				
				})
			},
			upper(e) {},
			//滑动到底部
			lower(e) {
				this.moreReadHistoy()
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			async del(v) {
				await getUserWatchRecordDelete({
					ids:v.drama_id
				})
				this.page = 1
				await this.ReadHistoy()
			},
			// 阅读历史
			async ReadHistoy() {
				let res = await getUserWatchRecordList({
					page:this.page,
					page_size:this.page_size
				})
				this.totalPage = res.data.page_info.total
				this.History = res.data.data
				this.s = true
			},
			// 封装加载下滑更多数据
			async moreReadHistoy() {
				let newtotalPage = Math.ceil(this.totalPage / this.page_size)
				this.page++
				if (this.page > newtotalPage) return
				let res = await getUserWatchRecordList({
					page:this.page,
					page_size:this.page_size
				})
				let pageList = res.data.data
				this.History = this.History.concat(pageList)
			}
		},
	}
</script>

<style lang="less" scoped>
	@import url("./WatchHistory.less");
</style>